<script setup lang="ts">
import F_theme from "@/components/common/f_theme.vue";
import {ref} from "vue";
import F_user_trigger from "@/components/common/f_user_trigger.vue";
import {userStorei} from "@/stores/user_store";
import {showLogin} from "@/components/web/f_login";

const store = userStorei()

interface Props {
  noScroll?: boolean
  scrollTop?: number
}

const props = defineProps<Props>()
const {noScroll = false, scrollTop = 200} = props

const isShow = ref(noScroll)

if (!noScroll) {
  window.onscroll = function () {
    const top = document.documentElement.scrollTop
    if (top >= scrollTop) {
      isShow.value = true
    } else {
      isShow.value = false
    }
  }
}


</script>

<template>
  <div class="f_nav" :class="{isShow: isShow}">
    <div class="container">
      <div class="left">
        <router-link :to="{name: 'webIndex'}">首页</router-link>
        <router-link :to="{name: 'history'}">历史会话</router-link>
        <router-link :to="{name: 'square'}">角色广场</router-link>
      </div>
      <div class="right">
        <f_user_trigger v-if="store.isLogin"></f_user_trigger>
        <a v-else href="javascript:void (0)" @click="showLogin">登录</a>
        <f_theme class="theme"></f_theme>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.f_nav {
  width: 100vw;
  height: 60px;
  position: fixed;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  color: white;
  transition: all .3s;


  &.isShow {
    //box-shadow: 0 0 5px rgba(0, 0, 0, 0.06);
    background-color: var(--color-bg-1);
    color: var(--color-text-2);

    .n1 {
      color: var(--color-text-1);
    }

    .n2 {
      color: var(--color-text-2);
    }

    a {
      color: var(--color-text-2) !important;
    }

    .theme {
      color: var(--color-text-2) !important;
    }
  }

  .container {
    width: 1200px;
    display: flex;
    align-items: center;

    .left {
      width: 80%;

      a {
        margin-right: 40px;

        &:last-child {
          margin-right: 0;
        }
      }

    }

    .right {
      width: 20%;
      display: flex;
      align-items: center;
      justify-content: end;

      .theme {
        margin-left: 20px;
        color: white;
        font-size: 18px;
        cursor: pointer;
      }
    }

    a {
      font-size: 16px;
      text-decoration: none;
      color: white;
    }

    a.router-link-exact-active {
      color: @primary-6 !important;
    }
  }
}
</style>